import { Button } from "antd-mobile";
import ListGroup, { ListGroupItem } from "../ListGroup";
import ProgressForm from "../ProgressForm";
import Styles from "./index.module.scss";
import { useMemo, useState } from "react";

const index = () => {
  const [details, setDetails] = useState({ state: 1 });

  const initData = useMemo(
    () => ({
      btnData: {
        1: [
          { text: "报送", color: "primary", fill: "solid" },
          { text: "暂无更新", color: "primary", fill: "outline" },
        ],
        2: [
          { text: "提交", color: "primary", fill: "solid" },
          { text: "暂无更新", color: "primary", fill: "outline" },
          { text: "退出编辑", color: "primary", fill: "outline" },
        ],
      },
    }),
    []
  );

  const handleClick = (item: { text: string }) => {
    const { state } = details;
    const { text } = item;
    if (state === 1) {
      if (text === "报送") {
        setDetails((state) => {
          state.state = 2;
          return { ...state };
        });
      }
      return;
    }
  };

  return (
    <>
      <div style={{ paddingBottom: "60px" }}>
        {details.state === 1 ? (
          <>
            <ListGroup>
              <ListGroupItem
                title="工作进度"
                layout="vertical"
                paragraph="dsaildjalksdjalksdals"
              />
            </ListGroup>
            <ListGroup>
              <ListGroupItem
                layout="vertical"
                title="问题类型"
                paragraph="dsaildjalksdjalksdals"
              />
              <ListGroupItem
                layout="vertical"
                title="存在问题"
                paragraph="dsaildjalksdjalksdals"
              />
            </ListGroup>
            <ListGroup>
              <ListGroupItem
                layout="vertical"
                title="下一步工作计划"
                paragraph="dsaildjalksdjalksdals"
              />
            </ListGroup>
            <ListGroup>
              <ListGroupItem
                layout="vertical"
                title="相关会议纪要"
                paragraph="dsaildjalksdjalksdals"
              />
            </ListGroup>
          </>
        ) : (
          <ProgressForm />
        )}
      </div>
      <div className={`bg_ffffff ${Styles.btn}`}>
        <ul className={`d_flex ${Styles.btn_view}`}>
          {initData.btnData[details.state].map(
            (item: { text: string; color: any; fill: any }) => (
              <li className={`mr_10 ${Styles.btn_view_item}`} key={item.text}>
                <Button
                  onClick={() => handleClick(item)}
                  block
                  color={item.color}
                  fill={item.fill}
                  className={`fontsize_16`}
                >
                  {item.text}
                </Button>
              </li>
            )
          )}
        </ul>
      </div>
    </>
  );
};

export default index;
